$themeMap:(
  primary:(
    app-container: #f3f6fd,
    main-color: #1f1c2e,
    secondary-color: #4A4A4A,
    link-color: #1f1c2e,
    link-color-hover: #c3cff4,
    link-color-active: #fff,
    link-color-active-bg: #1f1c2e,
    projects-section: #fff,
    message-box-hover: #fafcff,
    message-box-border: #e9ebf0,
    more-list-bg: #fff,
    more-list-bg-hover: #f6fbff,
    more-list-shadow: rgba(209, 209, 209, 0.4),
    button-bg: #1f1c24,
    search-area-bg: #fff,
    star: #1ff1c2,
    message-btn: #fff,
  ),
  dark:(
    app-container: #1f1d2b,
    main-color: #fff,
    secondary-color: rgba(255,255,255,.8),
    projects-section: #1f2937,
    link-color: rgba(255,255,255,.8),
    link-color-hover: rgba(195, 207, 244, 0.1),
    link-color-active-bg: rgba(195, 207, 244, 0.2),
    button-bg: #1f2937,
    search-area-bg: #1f2937,
    message-box-hover: #243244,
    message-box-border: rgba(255,255,255,.1),
    star: #ffd92c,
    light-font: rgba(255,255,255,.8),
    more-list-bg: #2f3142,
    more-list-bg-hover: rgba(195, 207, 244, 0.1),
    more-list-shadow: rgba(195, 207, 244, 0.1),
    message-btn: rgba(195, 207, 244, 0.1),
  )
);

@mixin themeMixin {
  @each $themeKey, $themeValue in $themeMap {
    html.#{$themeKey} & {
      //下面这样定义的话，就直接固定了混入中要写入什么css内容，不通用
      // color: map-get($themeValue, font-color);
      // background-color: map-get($themeValue, bg-color);
      // border: 1px solid map-get($themeValue, border-color);

      //由于外部要使用循环变量出来的内容，所以声明一个全局变量，方便外部调用
      $currentTheme: $themeValue !global;
      //可以使用scss中的@content，这个就很类似于vue中的插槽
      @content;
      //使用完之后，最好将全局变量清空
      $currentTheme: null !global;
    }
  }
}

//封装一个函数，方便调用取值
@function getVar($key) {
  @return map-get($currentTheme, $key);
}

//直接获取背景颜色的值
@mixin background_color($color) {
  @include themeMixin {
    background-color: getVar($color) !important;
  }
}

//直接获取字体颜色的值
@mixin font_color($color) {
  @include themeMixin {
    color: getVar($color) !important;
  }
}

//直接获取边框颜色的值
@mixin border_color($color) {
  @include themeMixin {
    border-color: getVar($color) !important;
  }
}